<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue';
import { Search, Lock, Unlock, Refresh, ArrowLeft, ArrowRight } from '@element-plus/icons-vue';

interface Props {
  url: string;
  title?: string;
  isLoading?: boolean;
  canGoBack?: boolean;
  canGoForward?: boolean;
  isSecure?: boolean;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  (e: 'navigate', url: string): void;
  (e: 'refresh'): void;
  (e: 'go-back'): void;
  (e: 'go-forward'): void;
}>();

const inputUrl = ref('');
const isFocused = ref(false);
const inputElement = ref<HTMLInputElement | null>(null);

// 监听URL变化
watch(
  () => props.url,
  (newUrl) => {
    if (!isFocused.value) {
      inputUrl.value = formatUrl(newUrl);
    }
  }, 
  { immediate: true }
);

// 计算属性：显示的URL
const displayUrl = computed(() => {
  return isFocused.value ? inputUrl.value : formatUrl(props.url);
});

// 计算属性：是否是搜索查询
const isSearchQuery = computed(() => {
  const url = inputUrl.value.trim();
  return !(url.startsWith('http://') || 
           url.startsWith('https://') || 
           url.startsWith('file://') ||
           url.includes('.') || 
           url.startsWith('about:') ||
           url.startsWith('chrome://'));
});

// 格式化URL显示
function formatUrl(url: string): string {
  if (!url) return '';
  
  // 去除协议部分显示
  return url.replace(/^https?:\/\//, '');
}

// 处理URL导航
function handleNavigate() {
  let navigationUrl = inputUrl.value.trim();
  
  // 如果输入的是搜索查询，使用搜索引擎
  if (isSearchQuery.value && navigationUrl) {
    navigationUrl = `https://www.bing.com/search?q=${encodeURIComponent(navigationUrl)}`;
  } 
  // 没有协议的URL添加协议
  else if (navigationUrl && !navigationUrl.startsWith('http://') && 
           !navigationUrl.startsWith('https://') && 
           !navigationUrl.startsWith('file://') &&
           !navigationUrl.startsWith('about:') &&
           !navigationUrl.startsWith('chrome://')) {
    navigationUrl = `https://${navigationUrl}`;
  }
  
  if (navigationUrl) {
    emit('navigate', navigationUrl);
  }
  
  // 失去焦点
  inputElement.value?.blur();
}

// 获取焦点时
function handleFocus() {
  isFocused.value = true;
  inputUrl.value = props.url;
  
  // 全选文本
  setTimeout(() => {
    inputElement.value?.select();
  }, 0);
}

// 失去焦点时
function handleBlur() {
  isFocused.value = false;
  inputUrl.value = formatUrl(props.url);
}

// 刷新页面
function handleRefresh() {
  emit('refresh');
}

// 后退
function handleGoBack() {
  emit('go-back');
}

// 前进
function handleGoForward() {
  emit('go-forward');
}

onMounted(() => {
  inputUrl.value = formatUrl(props.url);
});
</script>

<template>
  <div class="address-bar">
    <!-- 导航按钮组 -->
    <div class="navigation-buttons">
      <el-button
        :disabled="!canGoBack"
        :type="canGoBack ? 'primary' : 'info'"
        link
        circle
        @click="handleGoBack"
      >
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      
      <el-button
        :disabled="!canGoForward"
        :type="canGoForward ? 'primary' : 'info'"
        link
        circle
        @click="handleGoForward"
      >
        <el-icon><ArrowRight /></el-icon>
      </el-button>
      
      <el-button
        type="primary"
        link
        circle
        @click="handleRefresh"
      >
        <el-icon v-if="isLoading"><Loading /></el-icon>
        <el-icon v-else><Refresh /></el-icon>
      </el-button>
    </div>
    
    <!-- 地址输入框 -->
    <div class="address-input-container">
      <div class="security-icon">
        <el-icon v-if="isSecure"><Lock /></el-icon>
        <el-icon v-else><Unlock /></el-icon>
      </div>
      
      <input
        ref="inputElement"
        class="address-input"
        type="text"
        v-model="inputUrl"
        :title="props.url"
        @focus="handleFocus"
        @blur="handleBlur"
        @keyup.enter="handleNavigate"
      />
      
      <div class="search-icon" v-if="isSearchQuery && isFocused">
        <el-icon><Search /></el-icon>
      </div>
    </div>
  </div>
</template>

<style scoped>
.address-bar {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 8px;
  background-color: #f1f3f4;
  border-radius: 4px;
}

html.dark .address-bar {
  background-color: #202124;
}

.navigation-buttons {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.address-input-container {
  display: flex;
  align-items: center;
  flex: 1;
  height: 34px;
  background-color: #fff;
  border-radius: 20px;
  padding: 0 12px;
  transition: box-shadow 0.2s;
}

html.dark .address-input-container {
  background-color: #303134;
}

.address-input-container:focus-within {
  box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}

html.dark .address-input-container:focus-within {
  box-shadow: 0 1px 6px 0 rgba(255, 255, 255, 0.1);
}

.security-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f6368;
  margin-right: 8px;
}

html.dark .security-icon {
  color: #9aa0a6;
}

.address-input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #202124;
}

html.dark .address-input {
  color: #e8eaed;
}

.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f6368;
  margin-left: 8px;
}

html.dark .search-icon {
  color: #9aa0a6;
}
</style> 